import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import moment from 'moment';
import { Form, Input, DatePicker } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DICT } from '../enum';
import { DropDownSelect, DropDownSelectList } from '@/components/DropDownSelect/index';
import { dealElement } from '../../../../utils/util';

const { RangePicker } = DatePicker;

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  dict?: Object,
  dictList?: Object,
  new: boolean,
  cond?: any
}

const FormItem = Form.Item;
const ONE_PAGE_SIZE = 10;

@connect(({ device_alarm_fire }) => ({
  dict: device_alarm_fire.dict,
  cond: device_alarm_fire.cond,
  dictList: device_alarm_fire.dictList
}))
class Search extends Component<Props, any> {

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'device_alarm_fire/queryDict',
      payload: {
        keyList: DICT
      }
    }).then(() => {
      setTimeout(() => {
        const { cond, form } = this.props;
        const {pageNum, pageSize, ...searchParams} = cond;
        form.setFieldsValue(searchParams);
      }, 20);
    });

    dispatch({
      type: 'device_alarm_fire/queryDictList'
    })
  }

  search = e => { e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
     if(!!values.createTime) {
       values.createTimeStart = moment(values.createTime[0]._d).format("YYYY-MM-DD");
       values.createTimeEnd = moment(values.createTime[1]._d).format("YYYY-MM-DD");
     }
     delete values.createTime;
      if (!err) {
        dispatch({
          type: 'device_alarm_fire/updateCond',
          payload: dealElement(values)
        });

        this.props.initCurrent()
      }
    });
  };
  onChange = () => {};
  onOk = (data) => {};

  render() {
    const { form, dictList = {}, dict = {} } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 9 },
      wrapperCol: { span: 14 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow type="flex" justify="space-between">
          <SearchCol key={1} span={6}>
            <FormItem
              label="报警类型"
              {...formItemLayout}
            >
              {getFieldDecorator('type')(
                DropDownSelect(dict, 'device.alarm.type', '', '110px')
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={5}>
            <FormItem
              label="处理方式"
              {...formItemLayout}
            >
              {getFieldDecorator('type')(
                DropDownSelect(dict, 'device.alarm.type', '', '110px')
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={3} span={8}>
            <FormItem
              label="报警时间"
              {...formItemLayout}
            >
              {getFieldDecorator('createTime')(
                <RangePicker
                  showTime={{ format: 'HH:mm:ss' }}
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder={['开始日期', '结束日期']}
                  onChange={ this.onChange }
                  onOk={ this.onOk }
                />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={4} span={5}></SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create()(Search);
export default SearchS;
